﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>库存查询</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!--<script src="Script/jquery-2.1.4.js"></script>-->
    <script src="Scripts/jquery-2.1.4.js"></script>
</head>

<body>
    <div>
        <input type="checkbox" name="cb_test" id="cb_test" />
        <button onclick="test()">测试</button>
        <script type="text/javascript">
            function test() {
                var cb = $("#cb_test");
                var ischecked = cb.prop("checked");
                if (ischecked) {
                    cb.prop("checked", false);
                } else {
                    cb.prop("checked", true);
                }
            }
        </script>

    </div>
    <div id="container">
        <table class="zebra">
            <thead>
                <tr>
                    <th colspan="8">订单生成</th>
                </tr>
            </thead>
        </table>
        <table class="zebra" id="contents">
            <caption>库存查询订单生成</caption>
            <thead>
                <tr>
                    <th colspan="8">
                        <label>商品名称：</label> <input name="cd_name"
                                                    type="text" id="cd_name" /> <input type="button" value="Search"
                                                                                       onclick="search()" />
                    </th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="selectAll"
                               onchange="selectAll()" id="cb_chose" />全选 <input type="button"
                                                                                value="生成订单" onclick="orderGenerate()" />
                    </th>
                    <th>商品名称</th>
                    <th>品牌</th>
                    <th>产地</th>
                    <th>供应商</th>
                    <th>价格</th>
                    <th>库存数量</th>
                    <th>生产日期</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="cb_id" /> <input type="text"
                                                                      name="txt_num" />
                    </td>
                    <td>水杯</td>
                    <td>大江</td>
                    <td>四川</td>
                    <td>唯品会</td>
                    <td>12.50</td>
                    <td>100</td>
                    <td>2015-10-01</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="black" id="page_bar"></div>
    <div class="hiden" style="display: none;">
        <input type="hidden" name="currentPage" id="currentPage" /> <input type="hidden" name="pageSize" id="pageSize" /> <input type="hidden"
                                                                                                                                 name="pageCount" id="pageCount" />
    </div>

    <button onclick="clearRows()">清除</button>
    <button onclick="addRows()">生成</button>
    <script type="text/javascript">
        function selectAll() {
            var hasChk = $('#cb_chose').prop("checked");
            if (hasChk) {
                //全选
                $("[name='cb_id']").each(function (index, e) {
                    $(e).prop("checked", true);//全选
                });

            } else {
                $("[name='cb_id']").each(function (i, e) {
                    $(e).prop("checked", false);
                });
            }
        }

        function loadData(currentPage, pageSize, cd_name) {
            if (!currentPage)
                currentPage = 1;
            if (!pageSize)
                pageSize = 5;
            if (!cd_name)
                cd_name = "";
            $.get("api_v1/inventory/InventorySearch.json", {
                "currentPage": currentPage,
                "pageSize": pageSize,
                "cd_name": cd_name
            }, function (data) {
                clearRows();
                addRows(data);
            }, "json");

        }
        function addRows(json) {
            for (var i = 0; i < json.recordList.length; i++) {
                var newRow = "<tr><td><input type='checkbox' name='cb_id' value='" + json.recordList[i].skuCode
                    + "' /><input type='text' name='txt_num' /> </td> <td>"
						+ json.recordList[i].sname
						+ "</td>  <td>"
						+ json.recordList[i].brand
						+ "</td>  <td>"
						+ json.recordList[i].addr
						+ "</td>  <td>"
						+ json.recordList[i].brand
						+ "</td> <td>"
						+ json.recordList[i].price
						+ "</td>  <td>"
						+ json.recordList[i].qty
						+ "</td>  <td>"
						+ json.recordList[i].productionDate + "</td> </tr>";
                $("#contents tr:last").after(newRow);
            }

            var pageBar = $("#page_bar");
            var pageCount = json["pageCount"];
            var currentPage = json["currentPage"];
            var pageSize = json["pageSize"];

            setPageParam(currentPage, pageSize);

            if (currentPage == 1) {
                page_bar.innerHTML = " <span class='disabled'> &lt; </span>";
            } else {
                page_bar.innerHTML = "<a href='#' onclick='loadData(1,"
						+ pageSize + ")'>&lt;</a>"
            }
            for (var i = 1; i <= pageCount; i++) {
                if (currentPage == i) {
                    page_bar.innerHTML += "<span class='disabled'>" + i
							+ "</span>";
                } else {
                    var href = "<a href='#' onclick='loadData(" + i + ","
							+ pageSize + ")'>" + i + "</a>";
                    page_bar.innerHTML += href;
                }
            }
            if (currentPage == pageCount) {
                page_bar.innerHTML += "  <span class='disable'> &gt; </span>";
            } else {
                page_bar.innerHTML += "  <a href='#' onclick='loadData("
						+ pageCount + "," + pageSize + ")'> &gt; </a>";
            }

        }

        function clearRows() {
            $("#contents tr:gt(1)").remove();
        }

        function search() {
            var cd_name = $("#cd_name").val();
            var currentPage = $("#currentPage").val();
            var pageSize = $("#pageSize").val();
            loadData(currentPage, pageSize, cd_name);
        }
        $(function () {
            loadData();
        });

        function setPageParam(currentPage, pageSize) {
            $("#currentPage").val(currentPage);
            $("#pageSize").val(pageSize);
        }
        //订单生成
        function orderGenerate() {
            var codes = "";
            var num = "";
            //alert("生成订单");
            $("#contents tr:gt(1)").each(function (index, element) {
                //第一个td
                var td = $(element).children().first();
                var txt = td.children().last();
                var cb = td.children().first();

                var isChecked = cb.prop("checked");
                if (isChecked) {
                    if ("" == txt.val()) {
                        alert("请填写数量");
                        codes = "", num = "";
                        return;
                    }
                    codes = codes + cb.val() + ",";
                    num = num + txt.val() + ",";
                }
            });
            //提交到数据库
            if ("" == codes || "" == num) {
                $.post("api_v1/order/OrderAdd", {
                    "skuCodes": codes,
                    "nums": num
                }, function (data) {
                    alert(data);

                }, "json");
            }

        }
    </script>



    <style type="text/css">
        DIV.black {
            PADDING-RIGHT: 3px;
            PADDING-LEFT: 3px;
            FONT-SIZE: 80%;
            PADDING-BOTTOM: 10px;
            MARGIN: 3px;
            COLOR: #a0a0a0;
            PADDING-TOP: 10px;
            BACKGROUND-COLOR: #000;
            TEXT-ALIGN: center;
        }

            DIV.black SPAN.disabled {
                BORDER-RIGHT: #606060 1px solid;
                PADDING-RIGHT: 5px;
                BORDER-TOP: #606060 1px solid;
                PADDING-LEFT: 5px;
                PADDING-BOTTOM: 2px;
                BORDER-LEFT: #606060 1px solid;
                COLOR: #808080;
                MARGIN-RIGHT: 3px;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #606060 1px solid;
            }

            DIV.black SPAN.current {
                BORDER-RIGHT: #ffffff 1px solid;
                PADDING-RIGHT: 5px;
                BORDER-TOP: #ffffff 1px solid;
                PADDING-LEFT: 5px;
                FONT-WEIGHT: bold;
                PADDING-BOTTOM: 2px;
                BORDER-LEFT: #ffffff 1px solid;
                COLOR: #ffffff;
                MARGIN-RIGHT: 3px;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #ffffff 1px solid;
                BACKGROUND-COLOR: #606060;
            }

            DIV.black A {
                BORDER-RIGHT: #909090 1px solid;
                PADDING-RIGHT: 5px;
                BACKGROUND-POSITION: 50% bottom;
                BORDER-TOP: #909090 1px solid;
                PADDING-LEFT: 5px;
                BACKGROUND-IMAGE: url(bar.gif);
                PADDING-BOTTOM: 2px;
                BORDER-LEFT: #909090 1px solid;
                COLOR: #c0c0c0;
                MARGIN-RIGHT: 3px;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #909090 1px solid;
                TEXT-DECORATION: none;
            }
    </style>
</body>
</html>